<script setup lang="ts">
import Children from "./Children.vue";
import { ref } from "vue";

const dataFromChildren = ref("<尚未传值>");
const childrenExposedData = ref<InstanceType<typeof Children>>();

const getDataFromChildren = (data: string) => {
  dataFromChildren.value = data;
};
</script>

<template>
  <div style="background: skyblue; padding: 2rem">
    <h2>父组件</h2>
    <div>子组件传递过来的数据：{{ dataFromChildren }}</div>
    <div>子组件暴露的数据：{{ childrenExposedData }}</div>
    <Children
      title="Hello, 世界🌏"
      :arr="[1, 2, 3, 4, 5]"
      @on-click="getDataFromChildren"
      ref="childrenExposedData"
    />
  </div>
</template>

<style scoped></style>
